import {
    Row,
    Col,
    Card,
    Space,
    Button,
    message,
    Form,
    Input,
    Tooltip,
} from "antd";
import { BarsOutlined, InfoCircleOutlined } from "@ant-design/icons";
import { useNavigate } from "react-router-dom";
import { postNewBind } from "@/services/nodes/api";


const NewBind = () => {
    const navigate = useNavigate();
    const [form] = Form.useForm();

    const handleBind = async () => {
        return await postNewBind(
            { cert: form.getFieldValue('certificate') },
            navigate,
        ).then((res: any) => {
            if (res.status === 'success') {
                message.success(res.message);
                // 跳转到/nodes并刷新页面
                navigate('/nodes');
                setTimeout(() => {
                    window.location.reload();
                }, 100);
            }
            return
        }).catch((error: any) => {
            return
        });
    };

    return (
        <div
            style={{
                display: "flex",
                justifyContent: "center",
                alignItems: "center",
                minHeight: "100%",
                padding: "50px 24px 24px",
            }}
        >
            <Card
                title={
                    <Space size="middle">
                        <span style={{ fontSize: "18px", fontWeight: 500 }}>
                            绑定新节点
                        </span>
                        <Tooltip title="绑定新节点后，可以直接通过本节点访问和控制该节点的托管应用">
                            <Button
                                type="text"
                                icon={
                                    <InfoCircleOutlined
                                        style={{ fontSize: "16px" }}
                                    />
                                }
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                }}
                            />
                        </Tooltip>
                    </Space>
                }
                style={{
                    width: "100%",
                    maxWidth: "600px",
                    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
                    borderRadius: "8px",
                }}
            >
                <Row gutter={[16, 16]}>
                    <Col span={24}>
                        <Form
                            form={form}
                            layout="vertical"
                        >
                            <Form.Item
                                name="certificate"
                                rules={[
                                    { required: true, message: "请输入内容" },
                                ]}
                            >
                                <Input.TextArea
                                    rows={8}
                                    placeholder={`请输入绑定信息\n获取方式：\n1. 登录到要绑定的节点\n2.点击多节点\n3.选择本机\n4.右上角点击按钮<复制绑定信息>\n5.粘贴至此处`}
                                    style={{
                                        fontSize: "14px",
                                        padding: "12px",
                                        resize: "none",
                                    }}
                                />
                            </Form.Item>

                            <Form.Item>
                                <Button
                                    type="primary"
                                    size="large"
                                    style={{
                                        width: "100%",
                                        marginTop: "8px",
                                    }}
                                    onClick={handleBind}
                                >
                                    绑定
                                </Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
            </Card>
        </div>
    );
};

export default NewBind;